////首页旋转动画
@-webkit-keyframes qn {
  0% {
    transform:rotateZ(0deg);
    -ms-transform:rotateZ(0deg);
    -moz-transform:rotateZ(0deg);
    -webkit-transform:rotateZ(0deg);
    -o-transform:rotateZ(0deg);

  }
  100% {
    transform:rotateZ(360deg);
    -ms-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360deg);
    -webkit-transform:rotateZ(360deg);
    -o-transform:rotateZ(360deg);
  }
}
@-webkit-keyframes qw {
  0% {
    transform:rotateZ(0deg);
    -ms-transform:rotateZ(0deg);
    -moz-transform:rotateZ(0deg);
    -webkit-transform:rotateZ(0deg);
    -o-transform:rotateZ(0deg);
  }
  100% {
    transform:rotateZ(-360deg);
    -ms-transform:rotateZ(-360deg);
    -moz-transform:rotateZ(-360deg);
    -webkit-transform:rotateZ(-360deg);
    -o-transform:rotateZ(-360deg);

  }
}
.kp_qw{
  -webkit-animation: qw 8s linear 0s infinite;;
  -o-animation: qw 8s linear 0s infinite;;
  animation: qw 8s linear 0s infinite;;
}
.kp_qn{
  -webkit-animation: qn 8s linear 0s infinite;;
  -o-animation: qn 8s linear 0s infinite;;
  animation: qn 8s linear 0s infinite;;
}
////箭头动画
@-webkit-keyframes go {
  0% {
    -webkit-transform: translate(0, 0)
  }
  50% {
    -webkit-transform: translate(0, -10px)
  }
  100% {
    -webkit-transform: translate(0, 0)
  }
}


.wrap {
  margin: 0px auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.swiper-container, .swiper-slide{
  overflow: hidden;
}
.swiper-container, .swiper-slide, .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.page_01 img, .page_02 img {
  width: 100%;
}

.page_01 {
  width: 100%;
  height: 100%;
  /*background: -webkit-linear-gradient(top, #030921 0%, #000000 100%);*/
  position: relative;
  background-image: url(../images/bg.png);
  background-position: center center;
  background-size: cover;
}
.go {
  position: absolute;
  bottom: 2%;
  width: 10%;
  left: 45%;
  -webkit-animation: go 1.5s linear 0s infinite;
}

////首页动画结束



///排行榜动画
@keyframes rank1_move {
  0% {
    /*margin-top:-100%;*/
    left:110%;
    top:-100px;
  }
  100% {
    /*margin-top:24%;*/
    left:50%;
    top:16%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);

  }
}
@keyframes rank2_move{
  0% {
    right:110%;
    top:-100px;
  }
  100% {
    right:5.33%;
    top:6%;
  }
}
@keyframes rank3_move{
  0% {
    left:110%;
    top:-100px;
  }
  100% {
    left:3.4%;
    top:12%;
  }
}

@keyframes bImg_yx1{
  0% {
    right:-1rem;
    bottom:-3rem;
  }
  100% {
    left:40%;
    bottom:0;
  }
}
@keyframes bImg_zs2 {
  0% {
    left:-1rem;
    top:-3rem;
  }
  100% {
    left:57%;
    top:0;
  }
}

@keyframes bImg_zx2{
  0% {
    left:-1rem;
    bottom:-3rem;
  }
  100% {
    left:57%;
    bottom:0;
  }
}
@keyframes bImg_ys2{
  0% {
    right:-1rem;
    top:-3rem;
  }
  100% {
    right:15%;
    top:0;
  }
}

@keyframes bImg_yx2{
  0% {
    right:-1rem;
    bottom:-3rem;
  }
  100% {
    right:15%;
    bottom:0;
  }
}

.rank1_ani{
  -webkit-animation:rank1_move 1s ease-in-out forwards;
  animation:rank1_move 1s ease-in-out forwards;
}
.rank2_ani{
  -webkit-animation:rank2_move 1s ease-in-out forwards;
  animation:rank2_move 1s ease-in-out forwards;
}
.rank3_ani{
  -webkit-animation:rank3_move 1s ease-in-out forwards;
  animation:rank3_move 1s ease-in-out forwards;
}
.rank1{
  width: 36vw;
  height: 42vw;
  /*margin: 11vh auto 0;*/
  margin:0 auto;
  position: absolute;
  left:110%;
  top:-100px;

}
.rank2{
  width: 28vw;
  height: 32vw;
  position: absolute;
  right:110%;
  top:-100px;
}
.rank3{
  width: 28vw;
  height: 32vw;
  position: absolute;
  left:110%;
  top:-100px;

}
.book_img1{
  /*position: absolute;*/
  margin:0 auto;
  width: 36vw;
  height: 42vw;
  background: url("../images/rank/big_%20polygon.png");
  background-repeat:round;
}
.book_img2{
  /*position: absolute;*/
  width: 28vw;
  height: 32vw;
  background: url("../images/rank/big_%20polygon.png");
  background-repeat:round;
}
.book_img3{
  /*position: absolute;*/
  width: 28vw;
  height: 32vw;
  background: url("../images/rank/big_%20polygon.png");
  background-repeat:round;
}
.book_img1 img,.book_img2 img,.book_img3 img{
  width: 60%;
  margin: auto;
  display: block;
  padding-top: 12%;
}

.book_rank p{
  font-size: 4vw;
  float: left;
  margin-left: 26%;
  /*margin-top: 5px;*/

}
.book_rank span{
  font-size: 4vw;
  float: left;
  display: block;
  width:5vw;
  height:5vw;
  border:1px solid #FC3737;
  border-radius: 100%;
  background: #A32B32;
  display: block;
  text-align: center;
  line-height: 5vw;
  /*margin-top: 5px;*/

}
.book_des{
  width: 100%;
  margin-top:2rem;
  text-align: center;
  font-size:3.8vw;
  color:#98c3ec;
}
.book_des p{
  margin-bottom:5px;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}




//借还书边框动画
@keyframes draw {
  0% {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
  100% {
    stroke-dasharray: 61rem;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}
.outer_shape {
  fill: transparent;
  stroke: #099D94;
  -webkit-animation: 1s draw linear forwards;
  animation: 1s draw linear forwards;
}
.inner_shape {
  fill: transparent;
  stroke: #099D94;
  -webkit-animation: 1s draw linear forwards;
  animation: 1s draw linear forwards;
}
//借还书边框动画结束
@keyframes bImg_zs1 {
  0% {
    left:-5rem;
    top:-13rem;
  }
  100% {
    left:15%;
    top:0;
  }
}
@keyframes bImg_zx1{
  0% {
    left:-4rem;
    bottom:-13rem;
  }
  100% {
    left:15%;
    bottom:0;
  }
}
@keyframes bImg_ys1{
  0% {
    right:-5rem;
    top:-14rem;
  }
  100% {
    left:40%;
    top:0;
  }
}

@keyframes bImg_yx1{
  0% {
    right:-6rem;
    bottom:-13rem;
  }
  100% {
    left:40%;
    bottom:0;
  }
}
@keyframes bImg_zs2 {
  0% {
    left:-3rem;
    top:-11rem;
  }
  100% {
    left:57%;
    top:0;
  }
}

@keyframes bImg_zx2{
  0% {
    left:-7rem;
    bottom:-16rem;
  }
  100% {
    left:57%;
    bottom:0;
  }
}
@keyframes bImg_ys2{
  0% {
    right:-6rem;
    top:-10rem;
  }
  100% {
    right:15%;
    top:0;
  }
}

@keyframes bImg_yx2{
  0% {
    right:-6rem;
    bottom:-13rem;
  }
  100% {
    right:15%;
    bottom:0;
  }
}

.bImg_moveZS1{
  -webkit-animation:bImg_zs1 1s ease-in-out forwards;
  animation:bImg_zs1 1s ease-in-out forwards;
}
.bImg_moveYS1{
  -webkit-animation:bImg_ys1 1s ease-in-out forwards;
  animation:bImg_ys1 1s ease-in-out forwards;
}
.bImg_moveYX1{
   -webkit-animation:bImg_yx1 1s ease-in-out forwards;
   animation:bImg_yx1 1s ease-in-out forwards;
 }
.bImg_moveZX1{
    -webkit-animation:bImg_zx1 1s ease-in-out forwards;
    animation:bImg_zx1 1s ease-in-out forwards;
}
.bImg_moveZS2{
  -webkit-animation:bImg_zs2 1s ease-in-out forwards;
  animation:bImg_zs2 1s ease-in-out forwards;
}
.bImg_moveYS2{
  -webkit-animation:bImg_ys2 1s ease-in-out forwards;
  animation:bImg_ys2 1s ease-in-out forwards;
}
.bImg_moveYX2{
  -webkit-animation:bImg_yx2 1s ease-in-out forwards;
  animation:bImg_yx2 1s ease-in-out forwards;
}
.bImg_moveZX2{
  -webkit-animation:bImg_zx2 1s ease-in-out forwards;
  animation:bImg_zx2 1s ease-in-out forwards;
}
.zero{
  position: relative;
  overflow: hidden;
  .first_logo_box{
    width: 100%;
    height: 50%;
    position: relative;
    margin-top:10%;
    .logo_outer_circle{
      position: absolute;
      width: 81%;
      left:50%;
      top:50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      -moz-transform: translate3d(-50%, -50%, 0);
      -ms-transform: translate3d(-50%, -50%, 0);
      -o-transform: translate3d(-50%,-50%, 0);
      transform: translate3d(-50% ,-50%, 0);
      div,img{
        width: 100%;
      }

    }
    .logo_mid_circle{
      position: absolute;
      width: 68%;
      left:50%;
      top:50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      -moz-transform: translate3d(-50%, -50%, 0);
      -ms-transform: translate3d(-50%, -50%, 0);
      -o-transform: translate3d(-50%,-50%, 0);
      transform: translate3d(-50% ,-50%, 0);
      div,img{
        width: 100%;
      }
    }
    .logo_inner_circle{
      position: absolute;
      width:60%;
      left:50%;
      top:50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      -moz-transform: translate3d(-50%, -50%, 0);
      -ms-transform: translate3d(-50%, -50%, 0);
      -o-transform: translate3d(-50%,-50%, 0);
      transform: translate3d(-50% ,-50%, 0);
      div,img{
        width: 100%;

      }

    }
    .logo_all_box{
      position: absolute;
      width:45%;
      left:27.5%;
      top:30%;
      .logo_self{
        width: 50%;
        margin:0 auto 8px;
        img{
          width: 100%;
        }
      }
      .logo_txt{
        width: 100%;
        margin:auto;
        img{
          width: 100%;
        }

      }

    }

  }
  .first_des{
    position: absolute;
    width: 88%;
    text-align: center;
    left:6%;
    top:60%;
    p{
      font-size: 8vw;
      color:#148FED;

    }
  }
  .count_time{
    position: absolute;
    width: 100%;
    text-align: center;
    left:0%;
    top:84%;
    color:#148FED;


  }
  .open{
    position: absolute;
    top:70%;
    left:50%;
    -webkit-transform:translate(-50%) ;
    width: 75%;
    height: 65px;
    margin: 0 auto;
    text-align: center;
    line-height: 65px;
    font-size: 6vw;
    color:#148FED;
    background-image: url(../images/firstpage/btn.png);
    background-repeat: round;
  }
}
.page_01{
  width: 100%;
  position: relative;
  .top{
    height: 40px;
    position: relative;
    padding:0 5%;
    .back1{
      position: absolute;
      width: 11px;
      height: 17px;
      top: 13px;
      left: 15px;
      background-image: url(../images/rank/b_arrow.png);
      background-position: center center;
      background-size: cover;
    }
    img{
      width: 30/24rem;
      margin-right:0.5rem;
    }
    h3{
      width: 100%;
      height: 100%;
      line-height: 40px;
      font-size: 5vw;
      color:rgba(20,143,237,1);

    }
  }
  .bottom_rank{
    margin-top: 60%;
    ul{
      padding-top:14vh;
      li{
        width: 90%;
        height: 30px;
        margin:auto;
        margin-bottom:1.5vh;
        background-image: url(../images/rank/bot_border.png);
        background-repeat: round;
        span{
          float: left;
          color:#2985cf;
          font-family: 'ArialMT Regular';
          line-height: 30px;
        }
        span:nth-of-type(1){
          font-size:4vw;
          margin-left:5px;
          //margin-right:10px;
        }
        span:nth-of-type(2){
          font-size:4vw;
          margin-right:45px;
          margin-left: 4px;
        }
        span:nth-of-type(3){
          width: 65%;
          font-size:4.5vw;
        }
      }
    }
  }
}
.page_01.noticelist{
  .top{
    padding-left:40px;
  }
}
.two{
  .borders{
    width: 24.5rem;
    height: 7rem;
    margin: 0 auto;
    position: relative;
    text-align: center;
    .outer_q{
      position: absolute;
      left:0;
      top:0;
      width: 24rem;
      height: 6.5rem;
    }
    .inner_q{
      position: absolute;
      left:0.5rem;
      top:0.5rem;
      width: 24rem;
      height: 6.5rem;
    }
    .total_borrow{
      width: 23.5rem;
      height: 6rem;
      position: absolute;
      left:0.5rem;
      top:0.5rem;
      p:nth-of-type(1){
        margin-top:0.3rem;
        padding:0.625rem 0 0 0;
        font-size: 1.33333rem;
        color:#98a8c2;
      }
      p:nth-of-type(2){
        padding:0.625rem 0;
        font-size: 2rem;
        color:rgba(27,215,71,1);
      }

    }
  }
  .bbox{
    margin-top: 6vh;
    margin-bottom: 6vh;
    position: relative;
    .pub_img{
      position: absolute;
      width: 1rem;
      height:1.16666rem;
    }
    img{
      width: 100%;
    }
    .borrow_zs{
      left:-1rem;
      top:-3rem;
    }
    .borrow_zx{
      left:-1rem;
      bottom:-3rem;
    }
    .borrow_ys{
      right:-1rem;
      top:-3rem;
    }
    .borrow_yx{
      right:-1rem;
      bottom:-3rem;
    }
    .borrow_zs2{
      left:-1rem;
      top:-3rem;
    }
    .borrow_zx2{
      left:-1rem;
      bottom:-3rem;
    }
    .borrow_ys2{
      right:-1rem;
      top:-3rem;
    }
    .borrow_yx2{
      right:-1rem;
      bottom:-3rem;
    }
    .borrow{
      margin-bottom: 3vh;
      width: 100%;
      padding: 0 8%;
      li{
        float: left;
        width: 50%;
        height: 16%;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        position: relative;
        padding: 0 8%;
        .b_bg{
          width: 100%;
          position: relative;
          font-size: 2rem;
          .b_title{
            font-size: 1.3rem;
            color:#98a8c2;
          }
          .b_num{
            margin-top:-1rem;
            padding-bottom:0.3rem;
            span{
              color:#C6E421;
            }
            span:nth-of-type(2){
              font-size:1rem;
            }

          }

        }

      }


      .page6-wrap {
        background: red;
        margin: 0 auto;
      }
    }
  }
}
.three{
  width: 100%;
  height: 100%;
  position: relative;
  .comeTopBorder{
    width: 28rem;
    height: 16rem;
    margin:auto;
    position: relative;
  }
  #one{
    position: absolute;
    width: 27.5rem;
    height: 15.3rem;
    padding:0.3rem;
    left:0.5rem;
    top:0.5rem;
    //display: none;
    img{
      width: 100%;
      height: 100%;
    }
  }
  #two{
    position: absolute;
    left:0;
    top:0;
  }
  #third{
    position: absolute;
    left:0.5rem;
    top:0.5rem;
  }

  .button1,.button2{
    //width: 28rem;
    width: 28rem;
    height: 16rem;
    position:relative;
    background-color:transparent;
    text-transform:uppercase;
    //color:white;
    font-weight:700;
    letter-spacing:1px;
    border:none;
    font-size:15px;
    outline:none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  }

  .border{
    position:absolute;
    background:none;
    border:1px solid #0365b6;
  }
  #third>.border:nth-of-type(1),#two>.border:nth-of-type(1){
    top:0;
    left:0;
    width:28rem;
  }

  #third>.border:nth-of-type(2),#two>.border:nth-of-type(2){
    bottom:0;
    left:0;
    width:28rem;
  }

  #third>.border:nth-of-type(3),#two>.border:nth-of-type(3){
    left:0;
    top:-1px;
    height:16rem;
  }

  #third>.border:nth-of-type(4),#two>.border:nth-of-type(4){
    top:-1px;
    right:0;
    height:16rem;
  }
  .border1{
    border-top:1px solid #0365b6;
    transform:translate(0, 15.85rem);
    transition:all 1s ease-in-out;

  }

  .border2{
    border-bottom:1px solid #0365b6;
    transform:translate(0, -16.35rem);
    transition:all 1s ease-in-out;

  }

  .border3{
    border-left:1px solid #0365b6;
    transform:translate(28rem, 0);
    transition:all 1s ease-in-out;

  }

  .border4{
    border-right:1px solid #0365b6;
    transform:translate(-28rem, 0);
    transition:all 1s ease-in-out;

  }
  @media screen and (max-width: 320px){
    .comeTopBorder{
      width: 24.5rem;
    }
    #one{
      width: 23.5rem;
    }
    .button1,.button2{
      width: 24rem;
    }
    #third>.border:nth-of-type(1),#two>.border:nth-of-type(1){
      width:24rem;
    }
    #third>.border:nth-of-type(2),#two>.border:nth-of-type(2){
      width:24rem;
    }
    .border3{
      transform:translate(24rem, 0);
    }
    .border4{
      transform:translate(-24rem, 0);
    }
  }

  .pernum{
    position: relative;
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
    color:#b4dffb;
    margin-bottom: 10px;
    .numone,.numtwo,.numthree{
      margin: 0 45px;
      width: 15px;
      height: 25vh;
      background-color: #192C5C;
      border-radius: 6px;
      position: relative;
      font-size:5vw;

      .count1,.count2,.count3{
        position: absolute;
        display: none;
        z-index: 999;
      }
      .bar1,.bar2,.bar3{
        position: absolute;
        z-index: 888;
        width: 100%;
        height: 0%;
        border-radius: 6px;
        background-color: #163D72;
        bottom: 0;
        left: 0;
      }
      .bar3{
        height: 0%;

      }
      .count1,.count2{
        width: 76px;
        height: 45px;
        line-height: 30px;
        text-align: center;
        background:url(../images/count/striangle.png);
        background-size: 76px 45px;
        //bottom: 25%;
        left:50%;
        bottom:0%;
        -webkit-transform: translate(-50%);

      }
      .count3{
        width: 95px;
        height: 45px;
        line-height: 30px;
        text-align: center;
        background:url(../images/count/striangle.png);
        background-size: 95px 45px;
        //top: 15%;
        left:50%;
        bottom:0%;
        -webkit-transform: translate(-50%);
      }
    }
  }
  .des{
    display: flex;
    justify-content: space-around;
    text-align: center;
    color:#b4dffb;
    font-size: 16px;
    margin-bottom: 2vh;

  }
  .totalPer{
    color:#b4dffb;
    font-size: 18px;
    p{
      margin-left: 30px;
    }
    .box{
      width: 100%;
      padding: 0 20px;
      margin-top: 2vh;
      .rectangle_bg{
        width: 100%;
        height: 30px;
        position: relative;
        background-color: #192C5C;
        border-radius: 8px;
        .rectangle{
          height: 100%;
          width: 20px;
          line-height: 30px;
          position: absolute;
          font-size: 5.5vw;
          top:0;
          left:0;
          border-radius: 15px;
          padding-left: 10px;
          background: url(../images/count/rectangle.png);
        }
      }
    }

  }
  @media screen and(min-width: 412px){
    .totalPer{
      margin-top:3rem;
    }

  }
}
.four {
  #mybanner {
    width: 80%;
    .mypagination{
      position: absolute;
      top:1vh;
      left:50%;
      -webkit-transform:translate(-50%);
      width: 30%;
      height: 3vh;
      boder:1px solid red;
      z-index: 999;
      text-align: center;
    }
    #bannerone{
      position: relative;
      .go{
        position: absolute;
        left:43.5%;
        bottom:8%;
        z-index: 999999999;
        width: 12.5%;
      }
    }
    .banner_bg1 {
      margin: auto;
      width: 95%;
      padding: 5vh 3vw 2vh 3vw;
      background: url(../images/recommend/banner_bg.png);
      background-repeat: round;
      //position: relative;
      div,img:nth-of-type(1) {
        height: 100%;
      }
      div{
        position: relative;
        img:nth-of-type(2){
          position: absolute;
          width: 50%;
          right:0;
          bottom:0;

        }
      }
      p {
        text-align: center;
        font-size: 6vw;
        margin-top: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;

      }

    }
    .banner_des {
      width: 75%;
      margin: auto;
      margin-top: 2vw;
      padding: 1vw 0;
      font-size: 4vw;
      text-align: center;
      vertical-align: middle;
      span:nth-of-type(2) {
        display: inline-block;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        margin: 0 3vw;
        text-shadow: 0 0 10px #fff;
        background-image: url(../images/recommend/num_bg.png);
        background-repeat: round;

      }

    }
  }
}
.five {
  position: relative;
  .notice_con {
    //display: none;
    height: 66%;
    overflow: hidden;
    position: relative;
    .other {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      .longline {
        position: absolute;
        height: 96%;
        border: 1px solid rgba(74, 89, 117, 0.86);
        top: 3%;
        left: 23%;
        z-index: -9999;
        opacity: 0.2;
        &::before,
        &::after {
          /*1.一定设置content属性*/
          content: "";
          /*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素  float  display  position*/
          position: absolute;
          left: -3px;
          //top: -10px;
          display: block;
          width: 4px;
          height: 4px;
          border-radius: 100%;
          border: 1px solid #3970D5;
        }
        &::before{
          top: -7px;
        }
        &::after {
          bottom: -6px;
          border: 1px solid #3970D5;

        }
      }

      li {
        text-align: center;
        width: 90%;
        margin: 3vh auto;

        .notice_date {
          float: left;
          margin-top: 8vw;
          color:rgba(220,230,247,1);
        }
        .contact_icon {
          display: block;
          float: left;
          width: 22px;
          height: 20px;
          background-image: url(../images/notice/icon.png);
          background-repeat: round;
          margin-top: 7vw;
          margin-left: 3vw;
          position: relative;
          .longline {
            position: absolute;
            height: 800px;
            border: 1px solid rgba(74, 89, 117, 0.86);
            top: -100%;
            left: 50%;
            -webkit-transform:translate(-50%) ;
            z-index: -9999;
            opacity: 0.2;
            &::before,
            &::after {
              /*1.一定设置content属性*/
              content: "";
              /*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素  float  display  position*/
              position: absolute;
              left: -3px;
              //top: -10px;
              display: block;
              width: 4px;
              height: 4px;
              border-radius: 100%;
              border: 1px solid #3970D5;
            }
            &::before{
              top: -7px;
            }
            &::after {
              bottom: -6px;
              border: 1px solid #3970D5;

            }
          }

        }
        .contact_line {
          display: block;
          float: left;
          margin-top: 2vw;
          margin-left: 3vw;
          color:rgba(220,230,247,1);

          span{
            display: inline-block;
            width: 18vw;
            height: 5px;
            background-image: url(../images/notice/mline.png);
            background-repeat: round;
            vertical-align: bottom;
          }
        }
        .notice_con {
          display: block;
          float: right;
          width: 50%;
          //margin-top: 10px;
          background-image: url(../images/notice/middle_frame.png);
          background-repeat: round;
          padding: 4vw 5vw 4vw 7vw;
          text-align: center;
          margin-right: 1vw;


          h3 {
            width: 100%;
            color: #80A7E7;
            font-size: 4vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

          }
          p {
            width: 100%;
            color: #77878B;
            font-size: 2vw;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
          }

        }
      }
      li:first-child {
        .contact_icon {
          margin-top: 8vw;

        }
        .contact_line {
          margin-top: 6vw;
          margin-left:1vw;
          color:rgba(220,230,247,1);
          p {
            margin-bottom: -3vw;
          }

          span {
            width: 20vw;
            height: 5vw;
            background-image: url(../images/notice/top_line.png);
            background-repeat: round;
          }
        }
        .notice_con {
          width: 51%;
          position: relative;
          background-image: url(../images/notice/first_frame.png);
          .new_icon {
            position: absolute;
            width: 30px;
            height: 20px;
            background-image: url(../images/notice/new.png);
            background-repeat: round;
            top: 1px;
            left: 12px;

          }
          h3 {
            color: #0479D8;
          }
          p {
            color: #C8E547;
          }

        }
      }
      li:last-child {
        .contact_line {
          span {
            height: 6vw;
            width: 19vw;
            margin-top: 2vw;
            background-image: url(../images/notice/bottom_line.png);
            background-repeat: round;
          }
        }
        .notice_con {
          width: 49%;
          background-image: url(../images/notice/last_frame.png);
        }

      }

    }
    >p{
      height: 1.1rem;
      overflow: hidden;
    }

  }
  .noticelist{
    display: none;
    position: absolute;
    top:0;
    left:0;
    .top{
      margin-bottom: 40px;
    }
    .list{
      width: 80%;
      height: 75vh;
      //padding: 3vw;
      margin: 8vh auto;
      background-image: url(../images/noticelist/fborder.png);
      background-repeat: round;
      .listitle{
        position: absolute;
        top:11vh;
        left:25vw;
        width: 50%;
        height: 7vh;
        font-size: 4vw;
        line-height: 6.5vh;
        padding: 0 3vw;
        color: #148fed;
        background-image: url(../images/noticelist/fborder_bg.png);
        background-repeat: round;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
      .listcon{
        height: 90%;
        width: 85%;
        left:7vw;
        top:2vw;
        padding: 2vw 3vw;
        text-align: center;
        margin: auto;
        .botline{
          width: 60%;
          text-align: center;
          border-bottom: 1px solid rgba(220, 230, 247, 0.45);
          padding-bottom: 3vh;
          padding-top: 3vh;
          margin: 0 auto;
          margin-bottom:3vh;
          span{
            display: inline-block;
            color:rgba(220,230,247,1);
            font-size: 3vw;
          }
        }
        .botpcon{
          width: 100%;
          height: 90%;
          overflow: hidden;
          div{
            p{
              overflow: hidden;
              color: #80A7E7;
              font-size: 4vw;
              text-indent: 8vw;
              text-align: left;
              margin-bottom: 1vh;
            }
          }
        }
      }
    }
  }
}
.star{
  .allstar{
    width: 90%;
    margin:auto;
    border:1px solid rgba(1,48,47,1);
    ul{
      li{
        text-align: center;
        position: relative;
        padding: 1vh 5%;
        border-bottom: 1px solid rgba(1,48,47,1);
        .s_head{
          width: 30%;
          margin: auto;
          img{
            width: 100%;
          }
        }
        .s_rank{
          width: 55%;
          height: 5vh;
          margin: 0.5vh auto;
          //text-align: center;
          line-height: 5vh;
          background-image: url(../images/star/red_sbg.png);
          background-repeat: round;
        }
        p{
          text-align: center;
          font-size: 3vw;
          color:rgba(120,157,217,1);
        }
        .p_bg{
          width: 16%;
          height: 3.2vh;
          line-height: 3.2vh;
          position: absolute;
          left:0;
          top:0;
          background-image: url(../images/star/red_bg.png);
          background-repeat: round;
        }

      }
      li:nth-of-type(2){
        .s_rank{
          background-image: url(../images/star/yellow_sbg.png);

        }
        .p_bg{
          background-image: url(../images/star/yellow_bg.png);

        }

      }
      li:nth-of-type(3){
        border-bottom: none;
        .s_rank{
          background-image: url(../images/star/green_sbg.png);

        }
        .p_bg{
          background-image: url(../images/star/green_bg.png);

        }
      }
    }
  }
}






